<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>商品页面</title>
    <link rel="stylesheet" href="style/base.css" type="text/css">
    <link rel="stylesheet" href="style/global.css" type="text/css">
    <link rel="stylesheet" href="style/header.css" type="text/css">
    <link rel="stylesheet" href="style/goods.css" type="text/css">
    <link rel="stylesheet" href="style/common.css" type="text/css">
    <link rel="stylesheet" href="style/bottomnav.css" type="text/css">
    <link rel="stylesheet" href="style/footer.css" type="text/css">

    <!--引入jqzoom css -->
    <link rel="stylesheet" href="style/jqzoom.css" type="text/css">

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/header.js"></script>
    <script type="text/javascript" src="js/goods.js"></script>
    <script type="text/javascript" src="js/jqzoom-core.js"></script>
    <!-- jqzoom 效果 -->
    <script type="text/javascript">

    </script>
</head>
<body>
<div id="app">
    <!-- 顶部导航 start -->
    <topnav_topnav></topnav_topnav>
    <!-- 顶部导航 end -->

    <div style="clear:both;"></div>

    <!-- 头部 start -->
    <div class="header w1210 bc mt15">
        <!-- 头部上半部分 start 包括 logo、搜索、用户中心和购物车结算 -->
        <div class="logo w1210">
            <h1 class="fl"><a href="index.html"><img src="images/logo.png" alt="商城"></a></h1>
            <!-- 头部搜索 start -->
            <cephalosome_navitems_search></cephalosome_navitems_search>
            <!-- 头部搜索 end -->

            <!-- 用户中心 start-->
            <cephalosome_navitems_user></cephalosome_navitems_user>
            <!-- 用户中心 end-->

            <!-- 购物车 start -->
            <cephalosome_navitems_cart></cephalosome_navitems_cart>
            <!-- 购物车 end -->
        </div>
        <!-- 头部上半部分 end -->

        <div style="clear:both;"></div>

        <!-- 导航条部分 start -->
        <div class="nav w1210 bc mt10">
            <!--  商品分类部分 start-->
            <div class="category fl cat1">
                <div class="cat_hd off">
                    <!-- 注意，首页在此div上只需要添加cat_hd类，非首页，默认收缩分类时添加上off类，并将cat_bd设置为不显示(加上类none即可)，鼠标滑过时展开菜单则将off类换成on类 -->
                    <h2>全部商品分类</h2>
                    <em></em>
                </div>
                <div class="cat_bd none">
                    <cephalosome_navitems_body></cephalosome_navitems_body>
                </div>

            </div>
            <!--  商品分类部分 end-->
            <cephalosome_navitems></cephalosome_navitems>
        </div>
        <!-- 导航条部分 end -->
    </div>
    <!-- 头部 end-->


    <div style="clear:both;"></div>


    <!-- 商品页面主体 start -->
    <div class="main w1210 mt10 bc">
        <!-- 面包屑导航 start -->
        <div class="breadcrumb">
            <h2>当前位置：<a href="">首页</a> >
                <a href="">{{goodsInfo.cat1_info.cat_name}}</a> >
                <a href="">{{goodsInfo.cat2_info.cat_name}}</a>
                >{{goodsInfo.cat3_info.cat_name}}
            </h2>
        </div>
        <!-- 面包屑导航 end -->

        <!-- 主体页面左侧内容 start -->
        <div class="goods_left fl">
            <!-- 相关分类 start -->
            <div class="related_cat leftbar mt10">
                <h2><strong>相关分类</strong></h2>
                <goods_leftbar_wrap_type></goods_leftbar_wrap_type>
            </div>
            <!-- 相关分类 end -->

            <!-- 相关品牌 start -->
            <div class="related_cat	leftbar mt10">
                <h2><strong>同类品牌</strong></h2>
                <goods_leftbar_wrap_brand></goods_leftbar_wrap_brand>

            </div>
            <!-- 相关品牌 end -->

            <!-- 热销排行 start -->
            <div class="hotgoods leftbar mt10">
                <h2><strong>热销排行榜</strong></h2>
                <goods_hotgoods></goods_hotgoods>
            </div>
            <!-- 热销排行 end -->


            <!-- 浏览过该商品的人还浏览了  start 注：因为和list页面newgoods样式相同，故加入了该class -->
            <div class="related_view newgoods leftbar mt10">
                <h2><strong>浏览了该商品的用户还浏览了</strong></h2>
                <goods_recommend></goods_recommend>

            </div>
            <!-- 浏览过该商品的人还浏览了  end -->

            <!-- 最近浏览 start -->
            <div class="viewd leftbar mt10">
                <h2><a href="">清空</a><strong>最近浏览过的商品</strong></h2>
                <goods_recently_visit></goods_recently_visit>

            </div>
            <!-- 最近浏览 end -->

        </div>
        <!-- 主体页面左侧内容 end -->

        <!-- 商品信息内容 start -->
        <div class="goods_content fl mt10 ml10">
            <!-- 商品概要信息 start -->
            <div class="summary">
                <h3><strong>{{goodsInfo.goods_name}}</strong></h3>

                <!-- 图片预览区域 start -->
                <goods_preview :logo="goodsInfo.logo"
                               :photos="goodsInfo.photos">
                </goods_preview>
                <!-- 图片预览区域 end -->

                <!-- 商品基本信息区域 start -->
                <div class="goodsinfo fl ml10">
                    <ul>
                        <li><span>商品编号： </span>{{goodsInfo.skuid}}</li>
                        <li class="market_price"><span>定价：</span><em>{{goodsInfo.price}}</em></li>
                        <li class="shop_price"><span>本店价：</span> <strong>{{goodsInfo.price}}</strong> <a
                                href="">(降价通知)</a></li>
                        <li><span>上架时间：</span>{{goodsInfo.on_sale_date}}</li>
                        <li :class="levelClass"><span>商品评分：</span> <strong></strong><a href="">(已有{{goodsInfo.comment_count}}人评价)</a>
                        </li>
                        <!-- 此处的星级切换css即可 默认为5星 star4 表示4星 star3 表示3星 star2表示2星 star1表示1星 -->
                    </ul>
                    <form action="" method="post" class="choose">
                        <ul>
                            <li class="product">
                                <dl>
                                    <dt>颜色：</dt>
                                    <dd>
                                        <a class="selected" href="javascript:;">黑色 <input type="radio" name="color"
                                                                                          value="黑色" checked="checked"/></a>
                                        <a href="javascript:;">白色 <input type="radio" name="color" value="白色"/></a>
                                        <a href="javascript:;">蓝色 <input type="radio" name="color" value="蓝色"/></a>
                                        <input type="hidden" name="" value=""/>
                                    </dd>
                                </dl>
                            </li>

                            <li class="product">
                                <dl>
                                    <dt>版本：</dt>
                                    <dd>
                                        <a href="javascript:;">i3 4G内存版 <input type="radio" name="ver" value=""/></a>
                                        <a href="javascript:;">i5 4G内存版 <input type="radio" name="ver" value=""/></a>
                                        <a class="selected" href="javascript:;">i5 8G内存版<input type="radio" name="ver"
                                                                                               value=""
                                                                                               checked="checked"/></a>
                                        <a href="javascript:;">SSD超极本 <input type="radio" name="ver" value=""/></a>
                                        <input type="hidden" name="" value=""/>
                                    </dd>
                                </dl>
                            </li>

                            <li>
                                <dl>
                                    <dt>购买数量：</dt>
                                    <dd>
                                        <a href="javascript:;" id="reduce_num"></a>
                                        <input type="text" name="amount" v-model="params.count" class="amount"/>
                                        <a href="javascript:;" id="add_num"></a>
                                    </dd>
                                </dl>
                            </li>

                            <li>
                                <dl>
                                    <dt>&nbsp;</dt>
                                    <dd>
                                        <input type="submit" value="" @click.prevent="submit" class="add_btn"/>
                                    </dd>
                                </dl>
                            </li>

                        </ul>
                    </form>
                </div>
                <!-- 商品基本信息区域 end -->
            </div>
            <!-- 商品概要信息 end -->

            <div style="clear:both;"></div>

            <!-- 商品详情 start -->
            <div class="detail">
                <div class="detail_hd">
                    <ul>
                        <li class="first"><span>商品介绍</span></li>
                        <li class="on"><span>商品评价</span></li>
                        <li><span>售后保障</span></li>
                    </ul>
                </div>
                <div class="detail_bd">
                    <!-- 商品介绍 start -->
                    <goods_introduce></goods_introduce>
                    <!-- 商品介绍 end -->

                    <!-- 商品评论 start -->
                    <goods_comment></goods_comment>
                    <!-- 商品评论 end -->

                    <!-- 售后保障 start -->
                    <goods_after_sale></goods_after_sale>
                    <!-- 售后保障 end -->

                </div>
            </div>
            <!-- 商品详情 end -->
        </div>
        <!-- 商品信息内容 end -->

    </div>
    <!-- 商品页面主体 end -->


    <div style="clear:both;"></div>

    <!-- 底部导航 start -->
    <topnav_bottomnav></topnav_bottomnav>
    <!-- 底部导航 end -->

    <div style="clear:both;"></div>
    <!-- 底部版权 start -->
    <topnav_bottom></topnav_bottom>
    <!-- 底部版权 end -->
</div>
<script src="js/vue.js"></script>
<script src="js/axios-min.js"></script>
<script src="js/mock-min.js"></script>
<script src="js/api.js"></script>
<script src="js/mock.js"></script>
<script src="components/topnav.js"></script>
<script src="components/cephalosome.js"></script>
<script src="components/goods.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            pid: GetQueryString("id"),
            goodsInfo: {
                cat1_info:{},
                cat2_info:{},
                cat3_info:{},

            },

            params: {
                skuid: GetQueryString("id"),
                count: 1,
            }
        },
        created() {
            getGoodsInfo(this.pid).then(res => {
                this.goodsInfo = res.data

            })
        },
        computed: {
            // 动态生成星级
            levelClass: function () {
                var Leclass = 'star'
                if (this.goodsInfo.comment_level != 5) {
                    Leclass = Leclass + this.goodsInfo.comment_level
                }
                return Leclass
            },
        },
        updated() {
            $(function () {
                $('.jqzoom').jqzoom({
                    zoomType: 'standard',
                    lens: true,
                    preloadImages: false,
                    alwaysOn: false,
                    title: false,
                    zoomWidth: 400,
                    zoomHeight: 400
                });
            })


            //商品详情效果
            $(".detail_hd li").click(function () {
                $(".detail_div").hide().eq($(this).index()).show();
                $(this).addClass("on").siblings().removeClass("on");
            });

        },


        methods: {
            submit: function () {


                AddCarts(this.params).then(res => {
                    if (res.data.errno == 0) {
                        alert("添加成功：将跳转到购物车页面")
                        location.href = "flow1.html"
                    } else {
                        console.log("添加失败：" + res.data.errmsg)
                    }

                })
            }

        }
    })
</script>

<script type="text/javascript">
    document.execCommand("BackgroundImageCache", false, true);
</script>
</body>
</html>